<template>
	<view class="my-promotion">
		<view class="listView">
			<view class="item">
				<text class="iconfont icon-qiandai left color_v1"></text>
				<text class="title">予礼瘦身素材</text>
				<text class="iconfont icon-up right"></text>
			</view>
			<view class="item" >
				<text class="iconfont icon-tongji left color_v2"></text>
				<text class="title">予礼瘦身素材</text>
				<text class="iconfont icon-up right"></text>
			</view>
			<view class="item">
				<text class="iconfont icon-jiantou_shangxiaqiehuan_o rotateView left color_v3"></text>
				<text class="title">予礼瘦身素材</text>
				<text class="iconfont icon-up right"></text>
			</view>
			<view class="item">
				<text class="iconfont icon-chongzhi left color_v4"></text>
				<text class="title">予礼瘦身素材</text>
				<text class="iconfont icon-up right"></text>
			</view>
			<view class="item">
				<text class="iconfont icon-dingdan left color_v5"></text>
				<text class="title">予礼瘦身素材</text>
				<text class="iconfont icon-up right"></text>
			</view>
		</view>
		
		<!-- #ifdef H5 -->
		<view class="footer">
			<view class="item" @click="home">
				<text class="iconfont icon-shouye"></text>
				<text class="title">首页</text>
			</view>
			<view class="item">
				<text class="iconfont icon-ziyuan-xianxing active"></text>
				<text class="title">素材库</text>
			</view>
			<view class="item" @click="BackPage">
				<text class="iconfont icon-yonghu"></text>
				<text class="title">个人中心</text>
			</view>
		</view>
		<!-- #endif -->

	</view>
</template>
<script>
	import { getSpreadInfo, getUserInfo} from "@/api/user";
	export default {
		name: "MaterialLibrary",
		components: {},
		props: {},
		data: function() {
			return {
				
			};
		},
		mounted: function() {
			
		},
		methods: {
			BackPage() {
				// #ifdef H5
				const pages = getCurrentPages()
				if (pages.length > 1) {
					uni.navigateBack(1)
					return;
				}
				//使用vue-router返回上一级
				let a = this.$router.go(-1)
				if (a == undefined) {
					//重新定向跳转页面
					uni.reLaunch({
						url: '/pages/home/index'
					})
				}
				return;
				// #endif
				uni.navigateBack(1)
			},
			home() {
				this.$yrouter.switchTab({
					path: "/pages/home/index"
				});
			},
		}
	};
</script>


<style lang="less">
	.rotateView {
		-moz-transform: rotate(90deg);
		-webkit-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		transform: rotate(90deg)
	}

	.my-promotion {
		.header {
			box-sizing: border-box;
			padding: 30rpx 30rpx 0 30rpx;

			.topView {
				display: table;
				width: 100%;
				table-layout: fixed;
				height: 140rpx;
				box-sizing: border-box;
				padding: 30rpx 0;
				border-radius: 8rpx;
				background-color: #ffffff;
				box-shadow: 2rpx 2rpx 20rpx #ddd;

				.item {
					display: table-cell;
					vertical-align: middle;
					text-align: center;

					text {
						display: block;
						text-align: center;
						color: #555555;
						font-size: 26rpx;
					}
					
					
				}


			}
		}
		
		.listView{
			width: 100%;
			box-sizing: border-box;
			padding: 0 30rpx;
			margin-top: 30rpx;
			.item{
				height: 100rpx;
				width: 100%;
				background-color: #FFFFFF;
				box-shadow: 2rpx 2rpx 20rpx #ddd;
				border-radius: 8rpx;
				position: relative;
				margin-bottom: 20rpx;
				.left{
					font-size: 60rpx;
					display: block;
					float: left;
					height: 100%;
					width: 100rpx;
					text-align: center;
					line-height: 100rpx;
				}
				
				.title{
					height: 100%;
					line-height: 100rpx;
					display: block;
					float: left;
					font-size: 30rpx;
				}
				
				.right{
					float: right;
					height: 100%;
					width: 50rpx;
					display: block;
					text-align: center;
					line-height: 100rpx;
					font-size: 30rpx;
				}
				
				.color_v1{
					color: #ff3334;
				}
				.color_v2{
					color: #39c;
				}
				.color_v3{
					color: #ff6a00;
				}
				.color_v4{
					color: #d83250;
				}
				.color_v5{
					color: #555555;
				}
			}
		}
		
		.footer {
			height: 140rpx;
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			background-color: #FFFFFF;
			display: table;
			table-layout: fixed;
		
			.item {
				display: table-cell;
				vertical-align: middle;
				text-align: center;
				width: 33.3333333333333%;
				.iconfont {
					padding: 13rpx;
					border-radius: 100%;
					background-color: #0081FF;
					color: #FFFFFF;
				}
		
				.active {
					background-color: #d0114f;
				}
		
				.title {
					display: block;
					text-align: center;
					font-size: 30rpx;
					margin-top: 15rpx;
				}
		
			}
		}
	}

	.my-promotion .header .topView .item:nth-child(1) {
		border-right: #e8e8e8 solid 1rpx;
	}

	.my-promotion .header .topView .item:nth-child(2) {
		border-right: #e8e8e8 solid 1rpx;
	}

	.my-promotion .header .topView .item text:nth-child(1) {
		margin-bottom: 15rpx;
	}
	
	page {
		height: auto;
	}
</style>
